<template>
	<view class="content">
		<view class="fixed" @click="closeData">
		</view>

		<view class="child-system">
			<view class="controller">
				<view class="quit" @click="closeData">关闭</view><!-- <view class="reset" @click="resetData">重置</view> -->
				<view class="ok" @click="ok">确认</view>
			</view>
			<view class="item-list">
				<template v-show="constructArea.length > 0">
					<u-checkbox-group :wrap="wrap" @change="checkboxGroupChange">
						<u-checkbox v-model="item.checked" v-for="(item, index) in constructAreaList" :key="item.value"
							:name="item.value">{{ item.value }}</u-checkbox>
					</u-checkbox-group>

				</template>
				<view v-show="constructAreaList.length == 0" class="empty">无数据</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: ["constructArea", "faultStatus", "constructAreaName"],
		data() {
			return {
				constructAreaList: [],
				wrap: true,
			};
		},
		watch: {
			constructArea: {
				handler(news, olds) {
					if (this.constructAreaName) {
						this.name_list = this.constructAreaName.split(',');
						news.forEach((item) => {
							let index = this.name_list.findIndex(finItem => finItem == item
								.value)

							if (index != -1) {
								item.checked = true
							} else {
								item.checked = false
							}
						});
					} else {
						news.forEach((item) => {
							item.checked = false
						});
					}
					this.constructAreaList = news;
				},
				immediate: true,
			}
		},
		methods: {
			closeData() {
				this.$emit("close");
			},
			checkboxGroupChange(e) {
				this.name_list = e;
			},
			ok() {
				let id = [];
				this.name_list.forEach(item => {
					let index = this.constructArea.findIndex(finItem => finItem.value == item)
					index != -1 ? id.push(this.constructArea[index].code) : ''
				})
				// this.constructArea.forEach((item) => {

				// 	if (this.name_list.includes(item.value)) id.push(item.code);
				// });
				if (this.constructArea.length == 0) {
					this.name_list = "";
				}
				this.$emit("setArea", {
					name: this.name_list,
					id
				});
			},
		},
	};
</script>

<style scoped>
	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		overflow: auto;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.6);

		transition: all 0.25s ease-in-out 0s;
		transform: scale(1, 1);
	}

	.content {
		position: fixed;
		z-index: 100;
		/* background: #f9fbfe; */
		height: 100%;
	}

	.system {
		width: 91.5%;
		margin: 10px auto;
		color: #000;
	}

	.system>.title {
		line-height: 36px;
		font-size: 16px;
		font-weight: bold;
	}

	.system .add {
		float: right;
		color: #fff;
		background: #307be0;
		width: 70px;
		line-height: 36px;
		font-size: 12px;
		text-align: center;
		border-radius: 4px;
	}

	.system .list {
		border-radius: 4px;
		font-size: 14px;
		margin-top: 15px;
		color: #303133;
		box-shadow: 0 0 2px 2px rgb(0 0 0 / 10%);
	}

	.system>.list:last-child {
		margin-bottom: 40px;
	}

	.system .list>.title {
		background: #d8d8d8;
		line-height: 50px;
		padding: 0 15px;
		height: 50px;
	}

	.system .list>.title>.remove {
		color: red;
		float: right;
	}

	.list>.list-info {
		background: #fff;
		padding-left: 15px;
	}

	.list>.list-info .hr {
		height: 1px;
		background: #d8d8d8;
	}

	.child-system {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #fff;
		color: #000;
		font-size: 12px;
		z-index: 100;
		/* height: 50vh;overflow: auto; */
		transition: all 0.25s linear 0s;

	}

	.child-system>.controller {
		line-height: 40px;
		padding: 0 10px;
		border-bottom: 1px solid #d7d7d7;
		position: relative;
	}

	.child-system>.controller>.quit,
	.child-system>.controller>.ok {
		display: inline-block;
	}

	.child-system>.controller>.reset {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.child-system>.controller>.ok {
		float: right;
		line-height: 40px;
	}

	.system-name {
		line-height: 46px;
		border-bottom: 1px solid #d7d7d7;
		height: 46px;
		color: #2979ff;
		font-size: 14px;
	}

	.system-name>.nowrap {
		width: 96%;
		white-space: nowrap;
		overflow-x: scroll;
		margin: 0 auto;
	}

	.system-name>.nowrap>.name {
		display: inline-block;
	}

	.item-list {
		height: 40vh;
		overflow: auto;
		padding: 0 15px;
	}

	.item {
		line-height: 37px;
		border-bottom: 1px solid #d7d7d7;
		padding: 0 15px;
	}

	.push {
		position: fixed;
		bottom: 0;
		left: 0;
		color: #fff;
		background: #307be0;
		width: 100%;
		line-height: 36px;
		font-size: 12px;
		text-align: center;
	}

	.empty {
		padding: 30px;
		text-align: center;
		font-size: 16px;
	}
</style>

<style>
	.u-checkbox {
		line-height: 37px;
	}
</style>